<template>
	<view class="main">
		<!-- <view class="header">1111</view> -->
		<view class="mainBox">
			<image src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/store.png" alt="" />
			<view class="boxBottom">
				<view class="item title">
					仟金传家旗舰店
					<text>{{ orderData?.status }}</text>
				</view>
				<view class="item">
					<text>江苏省南京市秦淮区紫丹路1号设计产业园5号楼8楼</text>
					<view class="iconBox">
						<image src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/icon-1.png" alt="" />
						<image src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/icon-2.png" alt="" />
					</view>
				</view>
				<view class="item item-detail">
					<view>活动名称：{{ orderData?.name }}</view>
					<view>活动时间：{{ orderData?.startTime }}</view>
					<view>预 约 人：{{ orderData?.userId }}</view>
					<view>预留电话：{{ orderData?.userPhone }}</view>
					<view>预约备注：{{ orderData?.remark }}</view>
				</view>
				<button v-if="orderData?.status == '待到店'" @click="cancelOrder">
					取消预约
				</button>
			</view>
		</view>
		<van-dialog v-model:show="showDialog" title="取消预约" show-cancel-button close-on-click-overlay
			confirm-button-text="确定" cancel-button-text="暂不取消" @confirm="confirm">
			<view class="dialogMessage">确定取消该预约？</view>
		</van-dialog>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	// import { showConfirmDialog } from "vant";
	import { acitveOrderDetail, updateActiveOrder } from "../../common/api.js";
	// import { useRoute } from "vue-router";

	const route = ref();

	const state = ref("待到店");
	const showDialog = ref(false);
	const orderData = ref();

	onMounted(() => {
		route.value = getCurrentPages()[3].options
		getAcitveOrderDetail();
	});

	const getAcitveOrderDetail = () => {
		acitveOrderDetail({
			id: route.value.activeOrderId,
		}).then((res) => {
			console.log("acitveOrderDetail", res.data);
			if (res.data.data.status == 0) {
				res.data.data.status = "待到店";
			} else if (res.data.data.status == 1) {
				res.data.data.status = "已到店";
			} else if (res.data.data.status == 2) {
				res.data.data.status = "已完成";
			} else if (res.data.data.status == 3) {
				res.data.data.status = "已取消";
			} else if (res.data.data.status == 4) {
				res.data.data.status = "已过期";
			}
			orderData.value = res.data.data;
			console.log('orderData.value',orderData.value);
		});
	};

	const cancelOrder = () => {
		showDialog.value = true;
	};
	const confirm = () => {
		// console.log("cancel");
		updateActiveOrder({
			id: route.value.activeOrderId,
			status: 3,
		}).then(() => {
			getAcitveOrderDetail();
			// state.value = "已取消";
		});
	};
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100vw;
		height: 100vh;
		background-color: $sys_theme;
		color: $color-text;

		.header {
			position: absolute;
			top: 0;
			z-index: 999999;
			height: 9.61vh;
			width: 100%;
		}

		.mainBox {
			width: 100%;
			height: 100%;

			image {
				height: 39.9vh;
				width: 100%;
			}

			.boxBottom {
				padding: 0 7.6vw;

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					height: 6.5vh;
					// background-color: red;
					border-bottom: 1px solid $color-text;
					font-size: $font-size-small-s;

					.iconBox {
						display: flex;
						justify-content: space-between;
						height: 31.27%;
						width: 15.88%;

						image {
							height: 100%;
							width: 32.7%;
						}
					}
				}

				.item-detail {
					flex-direction: column;
					align-items: flex-start;
					box-sizing: border-box;
					height: 16.32vh;
					padding: 2.09vh 0;
				}

				.title {
					justify-content: flex-start;
					font-weight: bold;
					font-size: $font-size-nomarl;

					text {
						//   box-sizing: border-box;
						margin-left: 2vw;
						padding: 0.35vh 3.2vw;
						font-size: 1.87vw;
						background-color: $color-text;
						color: white;
					}
				}
			}
		}

		.dialogMessage {
			padding: 1.78vh 0 4.5vh 0;
			color: rgba(0, 0, 0, 1);
		}

		button {
			width: 53.07%;
			height: 3.63vh;
			margin-top: 5.48vh;
			border-radius: 0.625rem;
			background-color: $color-text;
			border: 0;
			color: $sys_theme;
			font-size: $font-size-small;
			border-radius: 5.07vw;
			font-weight: 600;
		}
	}

	::v-deep .van-dialog {
		width: 84.93vw;
		//   height: 20vh;
		font-size: 4.27vw;
		//   padding-top: 23.58vh !important;
	}

	::v-deep .van-button {
		height: 100%;
		font-size: 4.27vw;
		border: 1px solid #bababa;
	}

	::v-deep .van-dialog__header {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 2.83vh;
		padding-top: 4.37vh;
	}

	::v-deep .van-dialog__footer {
		display: flex;
		align-items: center;
		height: 7.27vh;
	}
</style>